<template lang="pug">
  el-drawer.commonDrawer(
    :title="type === 'borrow' ? '物资借用' : '物资领用'"
    :visible="visibleDialog"
    append-to-body
    center
    destroy-on-close
    direction="rtl"
    size="720px"
    @close="$_handleCancel"
  )
    .drawer-content
      form-box(
        ref="form"
        :fields="fields"
        :showBtns="false"
        :layoutCol="{ xs: 24, md: 24, lg: 24 }"
        labelWidth="146px"
      )
        div(slot="form-itemsStr")
          el-button(type="primary" icon="el-icon-circle-plus" round plain @click="addClients") 选择物资
      div.table-empty
        s-table(
          ref="table"
          :column="column"
          v-if="clients.length > 0"
          :dataPops="clients"
        )
          template(slot="count" slot-scope="text, scope")
            el-input-number.w(v-model="scope.count" controls-position="right" :min="0" :max="scope.stockCount")
    .drawer-footer.tr
      el-button.gradientVertical(size="large" :loading="submitting" @click="submitHandle" round) 提交
    table-selector(ref="clientSelector" @sureHandle="sureHandle" :visible.sync="clientsVisible" :value="clientValues" :column="client.column" :search-config="client.searchConfig" :queryPropsParams="{ consumable: type === 'borrow' ? false : true }" label="物资" req-url="web/materials/list")
</template>
<script>
import { addSubmit, getCategory } from '../api'
import TableSelector from '@/components/Basic/TableSelector'
import { clientColumn, seachConfigClient } from '../config'
import { getTeachersByArea } from '@/api/common'

const column = [
  {
    prop: 'name',
    label: '物资名称'
  },
  {
    prop: 'stockCount',
    label: '可用数量'
  },
  {
    prop: 'count',
    label: '数量'
  }
]

export default {
  components: {
    TableSelector
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'borrow'
    }
  },
  data () {
    return {
      loading: false,
      submitting: false,
      categoryList: [],
      info: {},

      clients: [],
      clientValues: [],
      clientsVisible: false,

      column,

      teacherList: []
    }
  },
  computed: {
    client () {
      return {
        column: clientColumn,
        searchConfig: seachConfigClient(this.categoryList)
      }
    },
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    fields () {
      const { teacherList } = this
      return [
        {
          key: 'uid',
          label: '使用人',
          type: 'select',
          fieldProps: {
            options: teacherList,
            props: { value: 'id', label: 'realName' }
          },
          rules: [{ required: true, message: '请选择' }]
        },
        {
          key: 'date',
          label: '日期',
          type: 'date',
          formatFlag: true,
          rules: [{ required: true, message: '请输入' }]
        },
        {
          key: 'remark',
          label: '备注',
          rules: [{ required: true, message: '请输入' }]
        },
        {
          key: 'itemsStr',
          label: '物资',
          type: 'slot'
        }
      ]
    }
  },
  async created () {
    const categoryList = await getCategory() || []
    this.categoryList = categoryList

    getTeachersByArea().then(res => {
      console.log(res)
      this.teacherList = res.content
    })
  },
  methods: {
    productFormChange (val, id, key) {
      console.log('123456')
    },
    sureHandle (data) {
      console.log(data)
      this.clients = data.map(x => {
        x.count = 0
        return x
      })
    },
    addClients () {
      this.clientValues = [...this.clients]
      this.clientsVisible = true
    },
    async submitHandle () {
      const type = this.type
      const values = await this.$refs.form.submitForm()
      console.log(values)
      if (this.clients.length === 0) {
        this.$message.warning('请选择物资')
        return
      }
      let flag = false
      this.clients.forEach(x => {
        if (x.count === 0) {
          this.$message.warning('数量需要大于0')
          flag = true
        }
      })
      if (flag) {
        return
      }
      const item = this.clients.map(x => {
        return `${x.id},${x.count}`
      })
      const itemsStr = item.join('|')
      this.submitting = true
      addSubmit({
        ...values,
        itemsStr,
        type: type === 'borrow' ? 1 : 3
      }).then(() => {
        this.$emit('getList')
        this.$_handleCancel()
        this.$message.success('操作成功')
      }).finally(() => {
        this.submitting = false
      })
    },
    $_handleCancel () {
      this.clients = []

      this.visibleDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
